<template>
	<view style="background-color: var(--fui-bg-color); height: 100vh; overflow: hidden;">
		<fui-section color="#fd5531" title="输入验证码" size="50" marginTop="150" marginBottom="100" descrTop="20" descrSize="35" :descr="`已发送验证码至 +86 ${phoneNumber}`" descrColor="var(--fui-color-subtitle)"></fui-section>
		<fui-single-input :native="false" isFocus borderColor="#ccc" :length="4" :value="value" @focus="onFocus" @complete="onComplete" ref="fui_si">
		</fui-single-input>
		<view style="margin-top: 80rpx; padding: 0 60rpx;">
			<fui-button text="确定" radius="96rpx" bold background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
		</view>
		<!-- 去登录 -->
		<view class="register">
			<text class="tologin" @click="toLoing"><text style="color: var(--fui-color-primary);">57秒</text>重新发送</text>
		</view>

		<!-- 数字键盘 -->
		<fui-digital-keyboard :show="show" spareKey="取消" @click="keyClick" @confirm="confirm" @backspace="backspace" @spare="spare">
		</fui-digital-keyboard>
		
		<!-- 提示 -->
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { maskPhoneNumber } from "@/utils/index.js"
	const phoneNumber = ref()

	onLoad((val) => {
		phoneNumber.value = maskPhoneNumber(15670077099)
	})
	const show = ref(false)
	// 输入框聚焦事件
	const onFocus = (e) => {
		show.value = true
	}

	const value = ref('')
	// 输入框输入完成后触发的事件
	const onComplete = () => {
		show.value = false
		// 登录操作
	}

	// 键盘输入点击事件
	const keyClick = (e) => {
		value.value += e.value
	}
	// 点击确定按钮时触发
	const toast = ref(null)
	const confirm = (val) => {
		if(value.value.length !== 4){
			toast.value.show({text:'请输入完整的验证码'})
		}
	}
	// 点击退格键时触发 
	const backspace = () => {
		if (value.value) {
			value.value = value.value.substring(0, value.value.length - 1)
		}
	}
	// 点击备用键时触发（取消）
	const spare = () => {
		show.value = false
	}
</script>

<style lang="scss" scoped>
	.register {
		display: flex;
		justify-content: center;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: var(--fui-color-subtitle);
		margin-top: 20rpx;
	}
</style>